<template>
    <div>

        {{ userStore.roleName }}
        {{ userStore.menuTree }}
        <hr>
        我是一个首页
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>

        <hr>
        <el-icon :size="20">
            <plus></plus>
        </el-icon>
        <el-icon :size="20">
            <Plus />
        </el-icon>
        <el-icon class="is-loading">
            <Loading />
        </el-icon>
        <hr>


        <div>
            <span style="float: left"><el-icon :size="20">
                    <component :is="iconvalue"></component>
                </el-icon></span>
            <el-select v-model="iconvalue" placeholder="请选择图标" @change="handleChangeIcon">
                <el-option v-for="(key, value, index) in ElementPlusIconsVue" :key="index" :label="value" :value="value">
                    <span style="float: left"><el-icon :size="20">
                            <component :is="value"></component>
                        </el-icon></span>
                    <span style="float: left">{{ value }}</span>
                </el-option>
            </el-select>
        </div>



        <div>{{ userStore.userId }}</div>
        <div>{{ userStore.roles }}</div>
        <div>{{ userStore.roleName }}</div>
        <div>{{ userStore.permissions }}</div>
        <div>{{ userStore.permissionCode }}</div>
        <hr>
        <div>{{ userStore.username }}</div>
        <div>{{ userStore.token }}</div>

        <div>{{ userStore.age }}</div>
        <div>{{ userage }}</div>

        <button @click="userStore.age++">年龄++</button>
        <button @click="userage++">userage年龄++</button>

        <hr>
        <div>{{ username }}</div>
        <div>{{ token }}</div>
        <hr>
        <animated-number from="0" :to="toNum" :key="toNum" duration="2000"></animated-number>
        <hr>
        {{ locale }}
        {{ t('uniLiveMangeSystem') }}
        {{ t('home') }}
        <hr>
        <button @click="handleChangeLang('en')">切换语言-EN</button>
        <button @click="handleChangeLang('zh-cn')">切换语言-ZH-CN</button>
        <hr>
        <div class="demo-pagination-block">
            <div class="demonstration">All combined</div>
            <el-pagination
            current-page="1"
            page-size="10"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/user.js'
import { computed, getCurrentInstance, ref } from 'vue';
import { useI18n } from 'vue-i18n'
import Cookies from 'js-cookie'

const { locale, t } = useI18n()
const userStore = useUserStore();
const username = computed(() => userStore.username)
const userage = computed(() => userStore.age)
const token = computed(() => userStore.token)
const { proxy } = getCurrentInstance();
const iconvalue = ref('')
const toNum = ref(23423)

const handleChangeIcon = (e) => {
    console.log("e", e)
}

// proxy.$alert("请输入内容","提醒").then(res=>{
//     alert(1)
// })

ElMessage({ message: "ok", showClose: true, type: "error" })

const handleChangeLang = (lang)=>{
    locale.value = lang
    Cookies.set("ksd-kva-language",lang)
}

</script> 